#login-body{width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; background-image: url(/assets/images/login-bg.jpg); background-repeat: no-repeat; background-size: cover;}
#login-logo{width: 585px; height: 148px; background-image: url(/assets/images/login-logo.png); margin: 20px;}
#login-content{width: 100%; display: flex; flex-direction: column; align-items: center;}
#login-form{width: 50%; display: flex; flex-direction: row; padding: 15px 15px 0px 15px; background-color: rgba(255, 255, 255, 0.45);}
.login-form{width: 50%; margin: 0px 10%;}
:host ::ng-deep .ant-input{background-color: rgba(0, 0, 0, 0); padding: 4px 6px; outline: none; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 2px solid #505357;}
:host ::ng-deep .ant-input:focus{outline: none;}
:host ::ng-deep .ant-form-item-label{text-align: left; font-size: 16px; padding: 0px 6px; font-weight: bold; letter-spacing: 8px;}
:host ::ng-deep .ant-form-item-label > label::after{content: '';}
.link-item{height: 64px; display: flex; flex-direction: column-reverse; margin-bottom: 24px;}
.text-button{background-color: rgba(0, 0, 0, 0); padding: 4px 0px 4px 6px; letter-spacing: 6px; color: #323334; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 2px solid #505357;}
.text-button:hover{color: #323334;}
:host ::ng-deep .ant-input::-webkit-input-placeholder{color: #666; font-size: 14px; letter-spacing: 5px;}
:host ::ng-deep .ant-form-item-has-error .ant-input{background-color: rgba(0, 0, 0, 0); outline: none;}
:host ::ng-deep .ant-form-item-has-error .ant-input:focus{outline: none;}
:host ::ng-deep .ant-checkbox-input{border-color: #fff;}
:host ::ng-deep .ant-checkbox-input:hover{border-color: #fff;}

.submit-button{margin-top: 40px;}
:host ::ng-deep .ant-btn-primary{background-color: rgba(0, 0, 0, 0); font-size: 16px; border: 1px solid #fff; border-radius: 5px; padding: 0px 15px 0px 25px; letter-spacing: 10px;}
.submit-checkbox{width: 25%; margin-top: 40px; color: #fff;}
.submit-checkbox a{margin-left: 10px; color: #fff;}
:host ::ng-deep .ant-checkbox-wrapper{color: #fff; letter-spacing: 5px;}
:host ::ng-deep .ant-checkbox-inner{background-color: rgba(0, 0, 0, 0); border-color: #fff;}
:host ::ng-deep .ant-checkbox-inner:hover{background-color: rgba(0, 0, 0, 0); border-color: #fff;}
:host ::ng-deep .ant-checkbox-inner:focus{background-color: rgba(0, 0, 0, 0); border-color: #fff;}
:host ::ng-deep .ant-checkbox-checked .ant-checkbox-inner{background-color: rgba(0, 0, 0, 0); border-color: #fff;}

.areement{overflow-y: auto; width: 100%; font-size: 14px;}
.areement p{text-indent: 2em;}
.areement h3{text-align: center; font-size: 16px; font-weight: bold;}
.areement h4{font-size: 14px; font-weight: bold;}


#registe-content{width: 100%; display: flex; flex-direction: column; align-items: center;}
#registe-form{width: 40%; display: flex; flex-direction: row; padding: 15px 15px 0px 15px; background-color: rgba(255, 255, 255, 0.45);}
.registe-form{width: 70%; margin: 0px 15%;}
.verify-code{position: absolute; right: 0px; bottom: 5px; width: 132px; background-color: #151c2d; color: #fff; border: 0px; border-radius: 5px;}


#find-password-content{width: 100%; display: flex; flex-direction: column; align-items: center;}
#find-password-form{width: 40%; display: flex; flex-direction: row; padding: 15px 15px 0px 15px; background-color: rgba(255, 255, 255, 0.45);}
.find-password-form{width: 70%; margin: 0px 15%;}

.copyright{
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -67.5px;
}